<template>
  <div class="recruit_box">
    <div class="recruit_head">
      <!-- 设置logo -->
      <div class="head_left">
        login
      </div>
      <!-- 设置公司标题 -->
      <div class="head_rigth">
        结温检测综合系统
      </div>
    </div>
    <!-- 登录 -->
    <div v-if="show" class="recruit_conte">
      <div class="conte_img"></div>
      <div class="login_box">
        <div class="mima_box">
          <div class="mima" @click="switchLoginAndRegister(false)">
            <span class="el-icon-lock"></span>
            <span>密码登录</span>
          </div>
        </div>
        <div class="login_text">登录</div>
        <div class="input_box">
          <el-input v-model="value" placeholder="手机号/邮箱"></el-input>
        </div>
        <div class="input_box">
          <el-input v-model="password" placeholder="密码"></el-input>
        </div>
        <div class="input_box1">
          <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
          <div>《xxxx服务协议》</div>
          <div>《隐私政策》</div>
        </div>
        <div class="bun_box">
          <el-button style="width: 100%; height: 100%;" @click="loginHandle" type="primary">登录</el-button>
        </div>
        <div class="que_huan">
          <div style="color: #aeaeaf;">已有账号？</div>
          <div style="color: #5b80f4;">立即登录</div>
        </div>
      </div>
    </div>
    <!-- 注册 -->
    <div v-if="!show" class="recruit_conte">
      <div class="conte_img"></div>
      <div class="login_box">
        <div class="mima_box">
          <div class="mima" @click="switchLoginAndRegister(true)">
            <span class="el-icon-user-solid"></span>
            <span>注册登录</span>
          </div>
        </div>
        <div class="login_text">注册</div>
        <div class="input_box">
          <el-input v-model="value" placeholder="用户名/手机号/邮箱"></el-input>
        </div>
        <div class="input_box">
          <el-input v-model="code" placeholder="验证码">
            <template slot="append">获取验证码</template>
          </el-input>
        </div>
        <div class="input_box">
          <el-input v-model="password" placeholder="设置密码"></el-input>
        </div>
        <div class="input_box1">
          <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
          <div>《xxxx服务协议》</div>
          <div>《隐私政策》</div>
        </div>
        <div class="bun_box">
          <el-button style="width: 100%; height: 100%;" @click="registerHandle" type="primary">注册</el-button>
        </div>
        <div class="que_huan">
          <div style="color: #aeaeaf;">已有账号？</div>
          <div style="color: #5b80f4;">立即登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/index'

export default {
  components: {},
  data () {
    return {
      show: true,
      value: '',
      code: '',
      password: '',
      checked: false,
    }
  },
  mounted () {

  },
  methods: {
    loginHandle () {
      console.log(this.value, this.code, this.password, this.checked)
      if (!this.value) {
        this.$message({
          message: '请输入账号',
          type: 'error'
        })
        return
      }
      if (!this.password) {
        this.$message({
          message: '请输入密码',
          type: 'error'
        })
        return
      }
      if (!this.checked) {
        this.$message({
          message: '请勾选服务条款',
          type: 'error'
        })
        return
      }
      login({
        name: this.value,
        password: this.password
      }).then(res => {
        console.log(res, 'res')
        if (res.code === 0) {
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          this.$store.commit('setUser', res.data)
          this.$router.push('/management')
        } else {
          this.$message({
            message: res.message || '登录失败',
            type: 'error'
          })
        }
      })
    },
    switchLoginAndRegister (val) {
      this.show = val
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.recruit_box {
  padding: 30px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #e8ecf3;
  overflow: hidden;
}

.recruit_head {
  width: 100%;
  height: 10%;
}

.head_left {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background: #4b74f3;
}

.head_rigth {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 30px;
}

.recruit_conte {
  display: flex;
  width: 100%;
  height: 85%;
  justify-content: center;
  margin-top: 5%;
}

.conte_img {
  margin-right: 5%;
  margin-top: 5%;
  width: 30%;
  height: 50%;
  background-image: url('~@/assets/imgs/dianzi.png');
  background-size: 100% 100%;
}

.login_box {
  padding: 5px 5px 5px 30px;
  width: 28%;
  height: 70%;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.mima_box {
  display: flex;
  justify-content: flex-end; /*靠右对其*/
  width: 100%;
  height: 6%;
  cursor: pointer;
}

.mima {
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /*左右对其*/
  width: 22%;
  height: 100%;
  background: #e8f5f4;
  color: #4b74f3;
  font-weight: bold;
}

.login_text {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding-top: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #111111;
}

::v-deep .el-input__inner {
  border: 1px solid #e6e6e6;
}

.input_box {
  padding: 20px 30px 15px 15px;
}

.input_box1 {
  padding: 15px 30px 15px 15px;
  font-size: 14px;
  display: flex;
  align-items: center; /* 垂直居中 */
  color: #5e82f4;
}

.bun_box {
  margin-top: 15px;
  padding-right: 30px;
  padding-left: 20px;
  width: 100%;
  height: 10%;
}

.que_huan {
  padding-top: 20px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
}
</style>
